<template>
  <div>
    <!-- 空重车信息 2018/3/6 11:39 zhangQ -->

    <tablePage ref="containerTab" :staticData="main_order_list" :isStartLoad="false" :mode="1">
      <template slot-scope="props">
        <Table :columns="columns7" border :data="props.data" @on-sort-change="props.sortChange"></Table>
      </template>
    </tablePage>
    <Modal v-model="detailModel" title="订车详情" width="80%">
      <tablePage ref="containerTab" :staticData="detail_list" :isStartLoad="false" :mode="1">
        <template slot-scope="props">
          <Table :columns="column1" border :data="props.data" @on-sort-change="props.sortChange"></Table>
        </template>
      </tablePage>
    </Modal>
  </div>
</template>
<script>
  import {getTrackCodeList, getTrackInfo} from '@api/backEnd/orderTrain'
  import tablePage from '@components/table/tablePage.vue'

  export default {
    name: 'trackCode',
    data () {
      return {
        detailModel: false,
        progresshow: false,
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        video_list: [],
        pageindex: 1,
        main_order_list: [],
        detail_list: [],
        lodding: false,
        list_loadding: false,
        columns7: [
          {
            title: '主运单号',
            width: 200,
            key: 'mainOrderNo'
          },
          {
            title: '股道名',
            width: 100,
            key: 'trackCode'
          },
          {
            title: '到达车次',
            width: 100,
            key: 'ddcc'
          },
          {
            title: '发站名',
            width: 100,
            key: 'fzm'
          },
          {
            title: '到站名',
            width: 100,
            key: 'dzm',
            render: (h, params) => {
              return (<span>{params.row.dzm === 'ZBR' ? '' : params.row.dzm}</span>)
            }
          },
          {
            title: '站名',
            width: 80,
            key: 'station'
          },
          {
            title: '最后更新时间',
            width: 180,
            key: 'getTime'
          },
          {
            title: '运单号',
            key: 'ddh'
          },
          {
            title: '时间',
            key: 'rksj'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              let station = params.row.station
              let ddcc = params.row.ddcc
              let getTime = params.row.getTime
              let param = {station, ddcc, getTime}
              let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.trackInfo(param)}>查看详情</i-button>)
              return (viewDetailBtn)
            }
          }
        ],
        column1: [
          {
            title: '车序',
            key: 'carno'
          },
          {
            title: '车号',
            key: 'carnumber'
          },
          {
            title: '状态',
            key: 'status'
          },
          {
            title: '车种',
            key: 'cz'
          },
          {
            title: '到达车次',
            key: 'ddcc'
          }, {
            title: '发站名',
            key: 'fzm'
          },
          {
            title: '到站名',
            key: 'dzm'
          },
          {
            title: '空重状态',
            render: (h, params) => {
              const fullmark = parseInt(params.row.fullmark)
              if (fullmark === 0) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'blue'
                    }
                  }, '空车')
                ])
              } else if (fullmark === 1) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'green'
                    }
                  }, '重车')
                ])
              }
            }
          },
          {
            title: '获取时间',
            width: 180,
            key: 'getTime'
          }
        ]
      }
    },
    methods: {
      trackInfo (param) {
        this.detailModel = true
        getTrackInfo(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.detail_list = res.data.data
          }
        })
      },
      tarckCodeList () {
        // const param = { page }
        getTrackCodeList().then(res => {
          if (res.data.isSuccess === 1) {
            console.log(res.data)
            this.main_order_list = res.data.data
          }
        })
      }
    },
    mounted () {
      this.tarckCodeList()
    },
    components: {tablePage}
  }
</script>
<style scoped>

</style>
